<template>
  <view class="image-container">
    <image v-if="!imgDel" v-show="imgLoaded" :src="imageSrc" :mode="mode ? mode : 'aspectFit'" @error="onErrorImg"
           @load="onSuccessImg"/>
    <image v-show="!imgLoaded" src='/static/login.png' mode="aspectFit" style="opacity: 0.7;"/>
  </view>
</template>

<script setup>
import {ref, onMounted, watch, onUnmounted} from 'vue'

let props = defineProps(['src', 'errorSrc', 'mode'])
let imageSrc = ref('')
let imageError = ref('')
const imgDel = ref(false)
let imgLoaded = ref(false)

watch(() => props.src, (newSrc) => {
  imageSrc.value = newSrc
}, {
  immediate: true
})

onUnmounted(() => {
  imgDel.value = true
})
// onMounted(() => {
// 	imageSrc.value = props.src
// 	imageError.value = props.errorSrc
// })

const onErrorImg = () => {
  imgLoaded.value = false
}
const onSuccessImg = () => {
  imgLoaded.value = true
}

const handleImageError = (error) => {
  imageSrc.value = '/static/pic.png'
}
</script>

<style scoped>
:global(base-cover-image) {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image-container {
  position: relative;
  z-index: 0;
  transform: translate3d(0, 0, 0);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>